---
title: 'Nuxt'
description: 'Integrate Nile Auth with Nuxt applications'
icon: 'mountain'
---

This guide will help you get started with Nile Auth and Nuxt. This guide outlines the steps required to configure and integrate authentication in your application.

<Note>
  If you have not done so yet, be sure you have [obtained credentials from the
  console](../getting-started/installation).
</Note>

<Steps>
<Step title="Install packages">
<CodeGroup>

```bash npm
  npm install @niledatabase/server @niledatabase/nitro @niledatabase/client
```

```bash yarn
  yarn add @niledatabase/server @niledatbase/nitro @niledatabase/client
```

```bash pnpm
  pnpm add @niledatabase/server @niledatabase/nitro @niledatabase/client
```

</CodeGroup>
</Step>

<Step title="Configure the extension">
Create the base nile instance, extended with the nitro plugin

```ts app/composables/useNile.ts
import { Nile } from "@niledatabase/server";
import { nitro } from "@niledatabase/nitro";
import type { withNitro } from "@niledatabase/nitro";

export const nile = Nile<withNitro>({
  debug: true,
  extensions: [nitro],
}));

```

</Step>

<Step>
  Add the route so that the APIs can be handled ```ts server/api/[...slug].ts
  import {nile} from "~/composables/useNile"; export default
  defineEventHandler(nile.handlers); ```
</Step>

</Steps>
## Client side

For requests in Vue, you can do the following

```Vue
<template>
<-- Sign in form here -->
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { signUp } from '@niledatabase/client';

const email = ref('')
const password = ref('')
const error = ref<string | null>(null)

const handleSignIn = async () => {

  try {
    const response = await signUp({
      email: email.value,
      password: password.value,
    })

    console.log('Signed in successfully:', response)

    // Optional: redirect, store session, etc.
    // await navigateTo('/dashboard')

  } catch (err: any) {
    error.value = err?.message || 'Sign-in failed'
    console.error('Sign-in error:', err)
  }
}
</script>
```

Not every API call is supported in the client. You may need to call some routes via the framework `useFetch('/api/tenants')`, or `defineEventHandler`

```ts server/api/submit-invite.post.ts
export default defineEventHandler(async (event) => {
  const ctxNile = nile.withContext({ headers: event.headers });
  const body = await readBody(event);
  const res = ctxNile.tenants.invite({ email: body.email });
  if (res instanceof Response) {
    return { message: 'An error has occurred' };
  }
  return { message: 'Invite sent' };
});
```
